﻿<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.mainTextArea {
	width: 800px;
	height: 600px;
	background-color: white;
}
body {
	background-color:gray;
}
</style>
</head>

<body>
<div class="mainTextArea" id="mainTextArea" contenteditable="true">
<p>
Click somewhere in this paragraph and click "Show Caret Position".
</p>
<p>
This is the second paragraph.
</p>
</div>
<p>
Location of keyboard caret: the <span id="caretPosition">unknown</span>th character. <br>
X coordinate: <span id="caretX">unknown</span> Y coordinate: <span id="caretY">unknown</span>
</p>
<p>
<input type="button" onclick="updateCaretPosition()" value="Show Caret Position">
</p>
<script type="text/javascript">
// More complete code at http://stackoverflow.com/questions/4767848/get-caret-cursor-position-in-contenteditable-area-containing-html-content
// And http://stackoverflow.com/questions/16227928/how-to-get-the-carets-position-in-contenteditable-div-when-entering-a-new-line
function updateCaretPosition()
{
	var position = window.getSelection().getRangeAt(0).startOffset;
	$("#caretPosition").text(position);
	var x = window.getSelection().getRangeAt(0).getClientRects()[0].left;
	var y = window.getSelection().getRangeAt(0).getClientRects()[0].top;
	$("#caretX").text(x);
	$("#caretY").text(y);
}
</script>
</body>

</html>
